<template>
	<view class="coverFull">
		<vs-nav-bar title="食谱" fixed topHeight></vs-nav-bar>
		<view class=" wraper">
			<block v-for="(item,index) in list" :key="index">
				<view class="content" @click="$Router.push({name:'foodslist_detail',params:{info:item}})">
					<view class="item">
						<view class="i-left" >
							<view class="iconwrap">
								<vs-ratio-view ratio="3/2.5">
									<image class="coverFull" :src="item.imgPath"></image>
								</vs-ratio-view>
							</view>
						</view>
						<view class="i-right flex column">
							<view class="title lineClamp_1">{{item.name}}</view>
							<view class="center flex1">
								<view class="lineClamp_2">
									{{item.content}}
								</view>
							</view>
							<view class="bottom">
								<text>{{item.readNum}}次阅读</text>
								<text>&bull;</text>
								<text>{{item.commentNum}}次评论</text>
							</view>
						</view>
					</view>
				</view>
			</block>
			<vs-loadmore :loading="bottomLoading" :paddingTB="30"></vs-loadmore>
		</view>
	</view>
</template>

<script>
	import {getFoodsList} from '@/api/homeapi'
	export default{
		data(){
			return{
				listQuery:{
					page:1,
					rows:10
				},
				list:[],
				bottomLoading:false
			}
		},
		onLoad() {
			this.getList()
		},
		onPullDownRefresh() {
			this.pulldownAction()
		},
		onReachBottom() {
			this.reachbottomAction()
		},
		methods:{
			getList(){
				this.bottomLoading = true
				getFoodsList(this.listQuery).then(res=>{
					console.log(res);
					res.data.forEach(v=>{
						v.imgPath = this.$Store.baseUrl + v.imgPath
					})
					this.bottomLoading = false
					this.listQuery.page++
					this.list = [...this.list,...res.data]
					console.log(this.listQuery);
					
				})
			},
			starListQuery(){
				return new Promise(resolve=>{
					this.listQuery.page = 1
					this.listQuery.rows = 10
					this.list = []
					resolve()
				})
			},
			reachbottomAction(){
				this.getList()
				this.bottomLoading = true
				setTimeout(()=>{
					this.status = 'nomore'
					this.bottomLoading = false
				},1000)
			},
			pulldownAction(){
				this.starListQuery().then(()=>{
					this.bottomLoading = true
					this.getList()
					setTimeout(()=> {
						this.bottomLoading = false
						uni.stopPullDownRefresh();
					}, 1000);
				})
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	.wraper{
		
		.content{
			border-bottom: 1px solid #ccc;
			.item{
				width: 90%;
				margin: 0 auto;
				display: flex;
				padding: 10px 0;
				.i-left{
					width: 40%;
					margin-right: 20px;
					
					.iconwrap{
						border-radius: 6px;
						overflow: hidden;
					}
					
				}
				.i-right{
					width: 60%;
					.title{
						font-size: 18px;
						color: #363636;
						padding-bottom: 5px;
						
					}
					.center{
						
						font-size: 14px;
						color: #777;
						padding-bottom: 5px;
					}
					.bottom{
						font-size: 12px;
						color: #888;
						
					}
				}
			}
		}
	}
</style>
